<template>
  <div class="min-h serveProject bg-wt">
    <div class="baseList">
      <div class="tableBoxs">
        <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
        <t-table
          row-key="index"
          :data="data"
          :columns="COLUMNS"
          :hover="hover"
          vertical-align="middle"
          :Loading="dataLoading"
          table-content-width="100%"
          table-layout="fixed"
        >
          <!-- 图片预览及展示 -->
          <template #image="{ row }">
            <div class="tdesign-demo-image-viewer__base">
              <t-image-viewer :images="[row.image]">
                <template #trigger="{ open }">
                  <div class="tdesign-demo-image-viewer__ui-image">
                    <img
                      alt="test"
                      :src="row.image"
                      class="tdesign-demo-image-viewer__ui-image--img"
                    />
                    <div
                      class="tdesign-demo-image-viewer__ui-image--hover"
                      @click="open"
                    >
                      <span><BrowseIcon size="1.4em" /> 预览</span>
                    </div>
                  </div>
                </template>
              </t-image-viewer>
            </div>
          </template>
          <!-- 价格拼接 -->
          <template #price="{ row }">
            {{ isDecimals(row.price) ? row.price : row.price + '.00' }}
          </template>
          <!-- 操作栏 -->
          <template #op="{ row }">
            <div class="operateCon">
              <a class="btn-dl">删除</a>
              <a class="font-bt">编辑</a>
              <a class="delete">禁用</a>
            </div>
          </template>
          <!-- 序号 -->
          <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>
        </t-table>
      </div>
    </div>
  </div>
  <!-- 分页 -->
  <t-pagination
    v-if="total > 3"
    v-model="pagination.pageNum"
    v-model:pageSize="pagination.pageSize"
    :total="total"
    @change="onPageChange"
  />
</template>

<script setup lang="jsx">
import { onMounted, ref } from 'vue'

import { COLUMNS } from './constants'
import { getProjectList } from '@/api/serve'
var data = ref([])
var total = ref(0)
const dataLoading = ref(false) // 加载中
// 翻页设置当前页
const onPageChange = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
}

//生命周期
onMounted(() => {
  getList()
})
//分页对象
const pagination = ref({
  pageSize: 10,
  pageNum: 1
})
//获取列表数据
const getList = async () => {
  const res = await getProjectList(pagination.value)
  data.value = res.data.records
  total.value = Number(res.data.total)
}

const isDecimals = (val) => {
  if (String(val).indexOf('.') > -1) {
    return true
  }
  return false
}
</script>
